/**
 *@描述：自定义的代码编辑组件，引用了react-ace组件库
 *@作者：殷健
 *@创建时间：2022/7/7
 *@最后修改时间：2022/7/7
 */

// @ts-ignore
import {LinkOutlined,PictureOutlined } from "@ant-design/icons";
import {useEffect} from "react";
import AceEditor from 'react-ace';

import 'ace-builds/src-noconflict/theme-xcode';// jsx模式的包
import 'ace-builds/src-noconflict/mode-jsx';// jsx模式的包
// import 'ace-builds/src-noconflict/theme-monokai';// monokai的主题样式
import 'ace-builds/src-noconflict/ext-language_tools'; // 代码联想
// import 'brace/mode/java';
// import 'brace/theme/github';

const CustomCodeEditor = (
    {
        value,
        onChange,
        type,
        readonly = false,
    }:{
        value?:any;
        onChange?:(val:any)=>void;
        type?:string;
        readonly?:boolean;
    }
)=>{

    //组件初始化函数
    //todo: useEffect函数
    useEffect(() => {
        onChange?.(value??null);
    }, [value])

    //内容改变时触发
    //todo:handleChange,内容改变时触发
    const handleChange = (val:any)=> {
        onChange?.(val);
    };

    // @ts-ignore
    return (
        <div>
            <AceEditor
                mode='jsx'
                theme="xcode"
                name="app_code_editor"
                fontSize={14}
                showPrintMargin
                maxLines={30}
                minLines={10}
                width="100%"
                showGutter
                readOnly={readonly}
                onChange={handleChange}
                value={value}
                wrapEnabled
                highlightActiveLine  //突出活动线
                enableSnippets  //启用代码段
                setOptions={{
                    enableBasicAutocompletion: true,   //启用基本自动完成功能
                    enableLiveAutocompletion: true,   //启用实时自动完成功能 （比如：智能代码提示）
                    enableSnippets: true,  //启用代码段
                    showLineNumbers: true,
                    tabSize: 2,
                }}
                // annotations={[{ row: 0, column: 2, type: 'error', text: 'Some error.'}]} // 错误，警告
            />
        </div>


    )
}

export default CustomCodeEditor;
